<script setup>
import { ref, reactive, toRef } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import MyIcon from '@/components/my-icon/index.vue'
import ChooseDialogue from '@/components/app/chooseDialogue.vue'
import { ElMessage } from 'element-plus'
import { momentsSyncs, momentsSync } from '@/api'
import { toRaw } from '@vue/reactivity'
const props = defineProps({
	activeKey: Number,
	tableData: Array,
	total: Number,
	currentPage: Number,
	pageSize: Number
})
const emits = defineEmits(['getFriendList', 'changeCurrentPage', 'changePageSize'])
const multipleSelection = ref([])
const isloading = ref(false)
const tipsTitle = ref('可手动点击“同步”按钮获取最新企微朋友圈发布情况哦～')
const Route = useRoute()
const router = useRouter()
const ruleFormRef = ref()
const ruleFormRefGroup = ref()
const dialogVisible = ref(false)
const form = ref({
	rule: [{ id: '', isShow: true, name: '' }]
})
const selectStaffValue = ref([])
const chooseDialogue = ref()
const multipleTableRef = ref()
const openingDialogName = ref('')
const typeshow = ref(1)
const ruleForm = reactive({
	staffs: [],
	times: '',
	name: '',
	type: ''
	// condition: 1,
})
const Refresh = async () => {
	let data = null
	isloading.value = true
	tipsTitle.value = '正在同步中，可能需要较长时间，请耐心等待'
	if (props.activeKey == 1) {
		data = await momentsSyncs()
	} else {
		data = await momentsSync()
	}

	if (data.status === 'success') {
		ElMessage.success(data.msg)
	} else {
		ElMessage.error(data.msg)
	}
	isloading.value = false
	tipsTitle.value = '可手动点击“同步”按钮获取最新企微朋友圈发布情况哦～'
}
const handleSizeChange = (pageSize) => {
	const params = getParams()
	params.size = pageSize
	emits('changePageSize', params)
}
const handleCurrentChange = (currentPage) => {
	const params = getParams()
	params.page = currentPage
	emits('changeCurrentPage', params)
}
const showDialogue = (type, name, title) => {
	typeshow.value = type
	switch (name) {
		case 'staff':
			if (title == 'staffid') {
				openingDialogName.value = 'staffid'
				var arr = toRaw(form.value.staffid)
				chooseDialogue.value.show(name, [])
			}
	}
}
const changeType = () => {
	emits('getFriendList', getParams())
}
const getChooseData = (val) => {
	if (typeshow.value == 1) {
		var Type = toRaw(val)
		selectStaffValue.value = [...val]
		ruleForm.staffs = val.map((item) => {
			return item.id
		})
		emits('getFriendList', getParams())
	} else if (typeshow.value == 2) {
		var Type = toRaw(val)
		selectStaffDay.value = Type
		getDataByIds(selectStaffDay.value)
	}
}

const conditionList = ref([
	{
		title: '已同步',
		value: 1
	},
	{
		title: '未同步',
		value: 2
	}
])
const tpyeList = ref([
	{
		title: '全部',
		value: 0
	},
	{
		title: '企业发表',
		value: 1
	},
	{
		title: '个人发表',
		value: 2
	}
])
const getFriendsType = (type) => {
	return tpyeList.value.filter((item) => {
		return item.value === type
	})[0].title
}
const changeName = () => {
	emits('getFriendList', getParams())
}
const getParams = () => {
	let obj = {
		page: props.currentPage,
		size: props.pageSize
	}
	for (const key in ruleForm) {
		if (ruleForm[key] != '' && ruleForm[key] != null) {
			if (key === 'times') {
				obj.times = []
				ruleForm.times.forEach((time) => {
					const year = time.getFullYear()
					const mouth = time.getMonth() > 9 ? time.getMonth() + 1 : '0' + (time.getMonth() + 1)
					const day = time.getDate() > 9 ? time.getDate() : '0' + time.getDate()
					obj.times.push(year + '-' + mouth + '-' + day)
				})
			} else {
				obj[key] = ruleForm[key]
			}
		}
	}
	return obj
}

const changeDialogVisible = (visible) => {
	dialogVisible.value = visible
}
const handleSelectionChange = (val) => {
	multipleSelection.value = val
}
const changeDate = (val) => {
	emits('getFriendList', getParams())
}
const exportExcel = async () => {
	const link = document.createElement('a')
	console.log(props.tableData[0].wid)
	console.log(props.activeKey)
	link.style.display = 'none'
	//设置连接
	link.href = `/wework/user/moments/downexcellist?wid=${props.tableData[0].wid + ''}&type=${props.activeKey + ''}`
	console.log(link.href)
	link.download = '成员详情'
	document.body.appendChild(link)
	//模拟点击事件
	link.click()
}
const todetails = (item) => {
	router.push({
		name:'friendsDetail',
		// path: '/app/groupManagement/friendsDetail',
		query: {
			id: item.id,
			type: item.type,
			activeKey: props.activeKey
		}
	})
}
const resetForm = (formEl) => {
	if (!formEl) return
	emits('getFriendList', {
		page: props.currentPage,
		size: props.pageSize
	})
	formEl.resetFields()
}
</script>
<template>
	<div class="main">
		<div v-if="props.activeKey === 1" class="input-group">
			<el-form :inline="true" label-width="119px" ref="ruleFormRefGroup" :model="ruleForm" class="demo-form-inline">
				<el-form-item class="input-item" label="创建人：" prop="staffs">
					<el-select
						v-model="ruleForm.staffs"
						remote
						multiple
						style="width: 220px"
						reserve-keyword
						remote-show-suffix
						:suffix-transition="false"
						placeholder="请选择"
						@focus="showDialogue('1', 'staff', 'staffid')"
					>
						<el-option v-for="item in selectStaffValue" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item class="input-item" prop="times">
					<template #label>创建时间 ：</template>
					<el-date-picker
						style="width: 202px"
						v-model="ruleForm.times"
						type="daterange"
						range-separator="~"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						@change="changeDate"
					/>
				</el-form-item>

				<el-form-item class="input-item" label="朋友圈类型：" prop="type">
					<el-select v-model="ruleForm.type" clearable placeholder="全部" @change="changeType">
						<el-option v-for="item in tpyeList" :label="item.title" :value="item.value" />
					</el-select>
				</el-form-item>

				<!-- 第二行表单 -->
				<!-- <el-form-item class="input-item" label="同步状态:">
					<el-select v-model="ruleForm.status" placeholder="请选择" clearable>
						<el-option v-for="item in conditionList" :label="item.title" :value="item.value" />
					</el-select>
				</el-form-item> -->
				<el-form-item class="input-item" label="任务名称：" prop="name">
					<el-input
						@keyup.enter="changeName"
						v-model="ruleForm.name"
						style="width: 220px"
						class="w-50 m-2"
						placeholder="请输入任务名称后回车查询"
						:suffix-icon="Search"
					/>
				</el-form-item>

				<el-form-item class="form-btn">
					<el-button class="big-btn" @click="resetForm(ruleFormRefGroup)">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div v-else class="input-group">
			<el-form :inline="true" label-width="119px" ref="ruleFormRef" :model="ruleForm" class="demo-form-inline">
				<el-form-item class="input-item" label="成员：" prop="staffs">
					<el-select
						v-model="ruleForm.staffs"
						remote
						multiple
						reserve-keyword
						remote-show-suffix
						:suffix-transition="false"
						placeholder="请选择"
						@focus="showDialogue('1', 'staff', 'staffid')"
					>
						<el-option v-for="item in selectStaffValue" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<!-- <el-form-item class="input-item" label="同步状态:">
					<el-select v-model="ruleForm.status" placeholder="请选择" clearable>
						<el-option v-for="item in conditionList" :label="item.title" :value="item.value" />
					</el-select>
				</el-form-item> -->
				<el-form-item class="input-item" prop="times">
					<template #label>发布时间 ：</template>
					<el-date-picker
						style="width: 220px"
						v-model="ruleForm.times"
						type="daterange"
						range-separator="~"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						@change="changeDate"
					/>
				</el-form-item>

				<!-- 第二行表单 -->

				<el-form-item class="input-item" label="任务名称：" prop="name">
					<el-input
						v-model="ruleForm.name"
						class="w-50 m-2"
						style="width: 220px"
						placeholder="请输入任务名称后回车查询"
						:suffix-icon="Search"
					/>
				</el-form-item>

				<el-form-item style="bottom: 12px" class="form-btn">
					<el-button class="big-btn" @click="resetForm(ruleFormRef)">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="customer-table">
			<div class="customer-table-header">
				<div class="customer-table-header-title">
					<span>共{{ props.total }}条朋友圈</span>
					<el-divider class="line" direction="vertical" />
					<el-tooltip effect="light" placement="top-start">
						<template #content>
							<p>
								<el-icon v-show="isloading" class="loading"><Loading /></el-icon>
								{{ tipsTitle }}
							</p>
						</template>
						<div @click="Refresh" class="table-refresh"><MyIcon class="icon-refresh" name="Refresh" /> 更新数据</div>
					</el-tooltip>

					<el-divider direction="vertical" />
					<span style="color: #00000073; font-size: 13px; font-weight: 500"
						>已选择{{ multipleSelection.length }}条朋友圈</span
					>
				</div>
				<div class="customer-table-header-btn">
					<!-- <el-tooltip content="您没有开通朋友圈，不可同步哦~" placement="top" effect="light">
						<el-button color="#8bc7ff" size="large" plain>同步至朋友圈</el-button>
					</el-tooltip> -->
					<el-button @click="exportExcel" color="#1890ff" size="large" plain>导出Excel</el-button>
				</div>
			</div>
			<el-table
				ref="multipleTableRef"
				border
				:data="props.tableData"
				style="width: 100%; margin-top: 16px"
				@selection-change="handleSelectionChange"
			>
				<!-- <el-table-column type="selection" width="55" /> -->
				<!-- <el-table-column fixed width="180">
					<template #header>
						<el-dropdown :disabled="props.tableData.length === 0" trigger="click">
							<div class="table-draopdown">
								选择全部内容
								<el-icon style="margin-left: 5px">
									<arrow-down />
								</el-icon>
							</div>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item>全部</el-dropdown-item>
									<el-dropdown-item>当前页面</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</template>
					<template #default="scope"> - </template>
				</el-table-column> -->
				
				<el-table-column property="name" label="任务名称" />
				<el-table-column label="发布方式" width="120">
					<template #default="scope">
						{{ scope.row.send_status == 1 ? '立即发送' : '定时发送' }}
					</template>
				</el-table-column>
				<el-table-column label="朋友圈类型" width="120">
					<template #default="scope">
						{{ getFriendsType(scope.row.type) }}
					</template>
				</el-table-column>
				<el-table-column label="创建人" width="220">
					<template #default="scope">
						<div class="owner-name gray-broder">
							<el-icon><UserFilled class="people-icon" /></el-icon>
							<span style="margin-left: 5px">{{ scope.row.staff_list[0].name }}</span>
						</div>
					</template>
				</el-table-column>
				<!-- <el-table-column label="创建人部门" width="220">
					<template #default="scope">
						<el-tooltip :content="scope.row.staff_department[0]" placement="top" effect="light">
							<div>
								{{ scope.row.staff_department[0] }}
							</div>
						</el-tooltip>
					</template>
				</el-table-column> -->
				<el-table-column property="ctime" label="创建时间" width="220" />
				<!-- <el-table-column label="同步朋友圈状态" width="220">
					<template #default="scope">
						{{ scope.row.status === 1 ? '未同步' : '已同步' }}
					</template>
				</el-table-column> -->
				<el-table-column width="120">
					<template #header>
						已发送成员
						<el-tooltip effect="light" placement="top">
							<template #content
								><div style="font-size: 14px; padding: 10px">
									管理员创建【企业微信朋友圈】时选择的<br />企业成员中已发表该朋友圈的成员
								</div>
							</template>
							<MyIcon name="Question" /> </el-tooltip
					></template>
					<template #default="scope"> {{ scope.row.yes_send }} </template>
				</el-table-column>
				<el-table-column width="120">
					<template #header>
						未发送成员
						<el-tooltip effect="light" placement="top">
							<template #content
								><div style="font-size: 14px; padding: 10px">
									管理员创建【企业微信朋友圈】时选择的<br />企业成员中未发表该朋友圈的成员
								</div>
							</template>
							<MyIcon name="Question" /> </el-tooltip
					></template>
					<template #default="scope"> {{ scope.row.not_send }} </template>
				</el-table-column>
				<el-table-column label="操作" align="center" fixed="right" width="80">
					<template #default="scope">
						<span @click="todetails(scope.row)" style="color: #1890ff">详情</span>
					</template>
				</el-table-column>
				<template #empty>
					<div class="table-null">
						<div class="table-null-box">
							<img
								style="margin: 0"
								src="../../../../assets/img/img/ame-empty-image.png"
							/>
							<p>没有搜索到相关的数据哦～</p>
						</div>
					</div>
				</template>
			</el-table>
			<div class="pag-box">
				<el-pagination
					v-model:current-page="props.currentPage"
					v-model:page-size="props.pageSize"
					:page-sizes="[10, 20, 50, 100]"
					background
					layout="total, sizes, prev, pager, next, jumper"
					:total="props.total"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				/>
			</div>
		</div>
		<ChooseDialogue :dialogVisible="dialogVisible" @getChooseData="getChooseData($event, val)" ref="chooseDialogue" />
	</div>
</template>

<style lang="scss" scoped>
.loading {
	color: #409eff;
	animation: changeright 1.5s linear infinite;
	-webkit-animation: changeright 1.5s linear infinite;
}
@-webkit-keyframes changeright {
	0% {
		-webkit-transform: rotate(0deg);
	}

	50% {
		-webkit-transform: rotate(180deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}
.main {
	overflow-y: auto;
	-webkit-box-flex: 1;
	flex: 1;
	:deep(.el-dropdown) {
		color: #1890ff;
	}

	.container-header {
		width: 100%;
		margin-bottom: 16px;
		font-size: 13px;
	}
	:deep(.el-table tr) {
		cursor: pointer;
		background-color: #fff;
	}
	:deep(.el-table thead) {
		color: #595959;
	}
	:deep(.el-table th.el-table__cell) {
		background-color: #fafafa;
	}
	:deep(.el-table.is-scrolling-left.el-table--border .el-table-fixed-column--left.is-last-column.el-table__cell) {
		border-right: 0;
	}
	:deep(.el-table--border .el-table__cell) {
		border-right: 0;
	}
	.pag-box {
		margin-top: 20px;
		display: flex;
		justify-content: flex-end;
	}
	.input-group {
		position: relative;
		display: flex;
		-webkit-box-pack: justify;
		justify-content: space-between;
		margin-bottom: 16px;
		padding: 16px 24px 16px 0px;
		background-color: #fff;
		flex-shrink: 0;
		.form-btn {
			position: absolute;
			right: 0;
			bottom: 24px;
			.big-btn {
				width: 92px;
				height: 36px;
			}
		}
		.input-item {
			// margin-left: 24px;
		}
		.total-question {
			margin: 10px 2px 0 2px;
		}
	}
	.gray-broder {
		max-width: 80px;
		height: 28px;
		padding: 3px 7px;
		overflow: hidden;
		border: 1px solid #d9d9d9;
		border-radius: 2px;
		font-size: 13px;
		white-space: nowrap;
		text-overflow: ellipsis;
		word-break: break-all;
	}
	.tag {
		background-color: #fafafa;
		padding: 0 11px;
		min-width: 52px;
		max-width: 112px;
		line-height: 26px;
		color: #595959;
		font-size: 14px;
		border: 1px solid #d9d9d9;
		border-radius: 2px;
	}
	.owner-name {
		display: flex;
		align-items: center;
		// padding: 3px 7px;

		.people-icon {
			color: #7ea4d1;
		}
		.owner-img {
			width: 36px;
			height: 36px;
		}
		// width: 58px;
		// height: 28px;
	}
	.customer-table {
		padding: 16px 28px;
		background-color: #fff;
		.table-draopdown {
			display: flex;
			align-items: center;
			margin-top: 5px;
			color: #1890ff;
		}
		.table-null {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 300px;
			.table-null-box {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				img {
					width: 128px;
				}
			}
		}
		.customer-table-header {
			display: flex;
			justify-content: space-between;
			.customer-table-header-btn {
				:deep(.el-button:focus) {
					background-color: #fff;
					color: #1890ff;
				}
				:deep(.el-button:hover) {
					background-color: #e3f6ff;
					color: #1890ff;
				}
			}
			.customer-table-header-title {
				display: flex;
				align-items: center;
				font-size: 14px;
				font-weight: 600;
				color: rgba(18, 18, 22, 0.85);
				.line {
					margin: 0 11px;
				}
				.table-refresh {
					display: flex;
					align-items: center;
					font-size: 13px;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.45);
					cursor: pointer;
					.icon-refresh {
						margin-right: 3px;
						transform: rotateY(180deg);
					}
				}
			}
		}
	}
}
</style>
